<template>
    <div>
        <div class="jdtiao">
            <el-progress type="circle" :percentage="parseInt(((step-1)/5)*100)" />
        </div>
        <div class="jdtitle">方案生成已完成进度</div>
        <div class="stepitem">
            <el-icon color="#04AE70" v-if="step>5"><CircleCheck /></el-icon>
            <el-icon class="rdo" v-else><RefreshRight /></el-icon>
            模型运行
        </div>
        <div class="stepitem">
            <el-icon color="#04AE70" v-if="step>4"><CircleCheck /></el-icon>
            <el-icon class="rdo" v-else><RefreshRight /></el-icon>
            参数计算
        </div>
        <div class="stepitem">
            <el-icon color="#04AE70" v-if="step>3"><CircleCheck /></el-icon>
            <el-icon class="rdo" v-else><RefreshRight /></el-icon>
            田间管理分析
        </div>
        <div class="stepitem">
            <el-icon color="#04AE70" v-if="step>2"><CircleCheck /></el-icon>
            <el-icon class="rdo" v-else><RefreshRight /></el-icon>
            生长环境分析
        </div>
        <div class="stepitem">
            <el-icon color="#04AE70" v-if="step>1"><CircleCheck /></el-icon>
            <el-icon class="rdo" v-else><RefreshRight /></el-icon>
            作物品种分析
        </div>
        <div class="quxbtn">
            <el-button type="primary" @click="close">
                <el-icon color="#fff" :size="16"><Close /></el-icon>取消
            </el-button>
        </div>
    </div>
</template>

<script setup>
import {ref,onMounted} from 'vue'

const emit = defineEmits(['close','finish'])
const percentage = ref(25)
const step = ref(1)
let st = ''
let clean_st = ''
onMounted(()=>{
    setTime()
})

const setTime = ()=>{
    if(step.value>5){
        emit('finish')
        return
    }
    st = setTimeout(()=>{
        step.value++ 
        setTime()
    },600)
}

const cleanTime = ()=>{
    if(step.value<=1){
        clearTimeout(clean_st)
        emit('close')
        return
    }
    clean_st = setTimeout(()=>{
        step.value--
        cleanTime()
    },600)
}

const close = ()=>{
    clearTimeout(st)
    cleanTime()
    // clearTimeout(st)
    // step.value = 1
    // emit('close')
}
</script>

<style lang="scss" scoped>
.jdtiao{
    display: flex;
    justify-content: center;
}
.jdtitle{
    display: flex;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    color: #000;
    padding: 10px 0;
}
.stepitem{
    display: flex;
    align-items: center;
    font-size: 14px;
    line-height: normal;
    padding: 10px 0 10px 154px;
    i{
        margin: 0 5px 0 0;
        &.rdo{
            animation: rotating 1.2s linear infinite;
        }
    }
}
.quxbtn{
    display: flex;
    justify-content: center;
    padding: 20px 0 0 0;
}
</style>